<template>
<div>


	<div class="bbg1">
		<div class="title2">
			<div class="shuxian2"></div>
			<div class="wenzi2">
				字典管理
			</div>
		</div>
	</div>

	<el-row class="bbg1">
	<el-form :inline="true" :model="form" >
		<el-form-item >
		    <el-input v-model="form.label" placeholder="标签" style="width:240px;"></el-input>
		</el-form-item>
		<el-form-item >
		    <el-input v-model="form.description" placeholder="描述" style="width:240px;"></el-input>
		</el-form-item>
		<el-form-item >
		    <el-input v-model="form.type" placeholder="类型" style="width:240px;"></el-input>
		</el-form-item>
		<el-form-item>
		    <el-button type="primary" @click="search" style="background:#21A5F0;width:140px;border:1px solid rgba(11, 178, 248);">查 询</el-button>
		</el-form-item>
		<el-form-item>
		    <el-button type="success" @click="add" style="background:#19A65B;width:140px;border:1px solid rgba(31, 231, 124);">创建</el-button>
		</el-form-item>
	</el-form>
	</el-row>

	<el-row class="bbg2">
	<el-table
	    :data="list.results"
	    :header-cell-style="{
			'background-color': '#169098',
		    'color': '#fff',    
		}"
	    border
	    height="740"
	    :row-style="{
	    	height : '69px'
	    }"
	    style="width: 1800px; background:#083749;">
	    <el-table-column
	      prop="value"
	      align="center"
	      label="键值"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="label"
	      align="center"
	      label="标签名">
	    </el-table-column>
	    <el-table-column
	      prop="description"
	      align="center"
	      label="描述"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="type"
	      align="center"
	      label="类型"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="sort"
	      align="center"
	      label="排序"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      align="center"
	      width="170"
	      label="操作">
	      	<template v-if="scope.row.id" slot-scope="scope">
	      		<el-button type="success" size="mini" 
	      		icon="el-icon-edit" circle
	      		@click="edit(scope.row)">
	      		</el-button>
	      		<el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button>
	      	</template>
	    </el-table-column>
	    
	  </el-table>
	</el-row>

	<el-row class="bbg1 text-center pt30 pb20">
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="pageNo"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next"
		  :total="list.totalRecord">
		</el-pagination>
	</el-row>

<el-dialog
  title="字典管理"
  :visible.sync="dialogVisible"
  width="530px">
  
  	<el-form ref="form" :model="current" label-width="70px">

		<el-form-item label="键值："  >
			<el-input v-model="current.value" style="width:400px;"></el-input>
		</el-form-item>

		<el-form-item label="标签名："  >
			<el-input v-model="current.label" style="width:400px;"></el-input>
		</el-form-item>

		<el-form-item label="类型："  >
			<el-input v-model="current.type" style="width:400px;"></el-input>
		</el-form-item>

		<el-form-item label="描述："  >
			<el-input v-model="current.description" style="width:400px;"></el-input>
		</el-form-item>

		<el-form-item label="排序："  >
			<el-input v-model="current.sort" style="width:400px;"></el-input>
		</el-form-item>

		<el-form-item label="pid："  >
			<el-input v-model="current.pid" style="width:400px;"></el-input>
		</el-form-item>


		<!-- <el-form-item label="备注："  >
			<el-input v-model="current.remark" style="width:400px;"></el-input>
		</el-form-item> -->

		<el-form-item >
			<el-row style="width:400px;">
			  <el-col :span="12">
			  	<el-button type="primary" @click="save"
			  	style="width:100px;background:#19A65B;border:1px solid rgba(31, 231, 124, 1);"
			  	>
					保 存
				</el-button>
			  	
			  </el-col>
			  <el-col :span="12" class="text-right">
			  	<el-button @click="dialogVisible = false"
			  	style="width:100px;background:#0A85CB;border:1px solid rgba(11, 178, 248, 1); color:#fff;"
			  	>取 消</el-button>
			  </el-col>
			</el-row>
		</el-form-item>

	</el-form>
  
</el-dialog>


</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'wordbookList',
	
	data () {
		return {
		  	list : {},

		  	form : {},

		  	pageNo : 1,
		  	pageSize : 10,

		  	current : {},

		  	dialogVisible : false,
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		init () {
			this.$http({
				fun : 'dictList',
				...this.form,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log(res);
					//this.list = res;
					this.list = this.$util.tableAdd(res);
				}
			});

		},

		add () {
			this.dialogVisible = true;
			this.current = {
				sort : 0,
			};
		},

		edit (item) {
			console.log(item);
			this.current = Object.assign({}, item);
			this.dialogVisible = true;
		},

		del (item) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
	        		fun : 'delDict',
	        		id : item.id,
	        		del_flag : 1,
	        		cb : res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.init();
	        		},
	        		err : res => {
	        			this.$message({
							type: 'error',
							message: '删除失败!'
						});
	        		}
	        	});
	          
	        }).catch(() => {
	                   
	        });
		},

		save () {
			this.$http({
				fun : 'createDict',
				...this.current,
				cb : res => {
					console.log(res);
					this.$message.success('操作成功');
					this.dialogVisible = false;
					this.init();
				}
			})
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		search () {
			this.pageNo = 1;
			this.init();
		},

	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
